<template>
    <div class="dateTimeCom">
        <span class="dateTitle">{{ dateConfig.title }}</span>
        <el-date-picker
            v-model="dateVal"
            :type="dateConfig.type"
            :picker-options="pickerOptions"
            :range-separator="dateConfig.rangeSeparator || '至'"
            :format="dateConfig.format || ''"
            :clearable="dateConfig.clearable"
            placeholder="选择时间"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            @change="selectTime"
        ></el-date-picker>
    </div>
</template>

<script>
    export default {
        name: 'ZDate',
        props: {
            dateTime: {
                default: () => [],
            },
            dateConfig: {
                type: Object,
                default: () => ({}),
            },
        },
        methods: {
            selectTime() {
                this.$emit('selectTime', this.dateVal)
            },
            dealPickerOption() {
                if (!this.dateConfig.pickerOptions) {
                    return
                }
                let shortcuts = this.dateConfig.pickerOptions.shortcuts || []
                let type = this.dateConfig.type
                this.pickerOptions.shortcuts = shortcuts.map((v) => {
                    return {
                        text: v.name,
                        onClick(picker) {
                            if (type === 'daterange' || type === 'datetimerange') {
                                const end = new Date()
                                const start = new Date()
                                start.setTime(start.getTime() - 3600 * 1000 * v.value)
                                picker.$emit('pick', [start, end])
                            } else {
                                const date = new Date()
                                date.setTime(date.getTime() - 3600 * 1000 * v.value)
                                picker.$emit('pick', date)
                            }
                        },
                    }
                })
                this.pickerOptions.disabledDate = this.dateConfig.pickerOptions.disabledDate
            },
        },
        mounted() {
            this.dateVal = this.dateTime
            this.dealPickerOption()
        },
        data() {
            return {
                dateVal: '',
                pickerOptions: {},
            }
        },
    }
</script>

<style lang="scss" scoped>
    .dateTimeCom {
        .dateTitle {
            font-size: 14px;
            color: #666;
            font-weight: 400;
            margin-right: 10px;
        }
        ::v-deep .el-input__inner {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }
        ::v-deep .el-date-editor {
            width: 130px;
        }
        ::v-deep .el-date-editor--datetime {
            width: 180px;
        }
        ::v-deep .el-input__icon {
            line-height: 30px;
        }
        ::v-deep .el-date-editor .el-range__icon,
        ::v-deep .el-date-editor .el-range__close-icon {
            line-height: 25px;
        }
        ::v-deep .el-date-editor .el-range-separator {
            line-height: 22px;
            font-size: 12px;
        }
        ::v-deep .el-date-editor .el-range-input {
            padding-top: 2px;
        }
        ::v-deep .el-date-editor--daterange .el-range-input {
            width: 100px;
        }
        ::v-deep .el-date-editor--datetimerange {
            width: 400px;
        }
        ::v-deep .el-date-editor--monthrange {
            width: 230px;
        }
        ::v-deep .el-date-editor--daterange.el-input__inner {
            width: 275px;
        }
    }
</style>
